if (null != id) {
    console.log(id)
    //data
    $(function () {

        $.get(`/dev/song/bofang/${id}`, function (result) {
            var na = result.data
            for (var i = 0; i < na.length; i++) {
                var name = na[i].songTitle
                var img = na[i].img
                var lyrics = na[i].content
            }
            let str = `<audio id="audi" src="/dev/views/cxy/music/${name}.mp3"></audio>`
            $(".ss").html(str)
            console.log(str)
            lyric = [{
                'name': name,
                'img': "/dev/views/cxy/music/img/" + img,
                'audio_src': "/dev/views/cxy/music/"+name+".mp3",
                'content': lyrics
            }
            ]


            window.onload = function () {
                var play_btn = document.getElementById("play_btn");
                var prev_btn = document.getElementById("prev_btn");
                var next_btn = document.getElementById("next_btn");
                var audio = document.getElementsByTagName("audio")[0];
                var initTime = document.getElementsByTagName("time")[0];
                var time = document.getElementsByTagName("time")[1];
                var progress_bar = document.getElementById("progress_bar");
                var progress_cube = document.getElementById("progress_cube");
                var vol_bar = document.getElementById("vol_bar");
                var vol_cube = document.getElementById("vol_cube");
                var lyric_con = document.getElementById("lyric_con");
                var lyric_txt = document.getElementById("lyric_txt");
                var photo_pic = document.getElementById("photo_pic");
                var icon1 = document.getElementById("icon1");
                var icon2 = document.getElementById("icon2");
                var lyric_tit = document.getElementById("lyric_tit");
                var list_con = document.getElementById("list_con");
                var list_item = list_con.getElementsByTagName("p");
                var songIndex = 0;
                var container = document.getElementById("container");
                var obj;

                function config() {
                    this.play_mark = true;
                    this.duration = audio.duration;
                    this.play_btn = "&#xe60e;";
                    this.vol = audio.volume;
                    this.timer = null;
                    this.rotateSum = 0;
                    this.icon1 = icon1.innerHTML;
                    this.icon2 = icon2.innerHTML;
                    this.icon1_co = icon1.style.color;
                    this.endplay_btn = "&#xe60c;";
                    this.endicon1 = icon1.innerHTML;
                    this.endicon2 = "&#xe674;";
                }


                obj = new config();

                //列表控制

                var allSong = "";
                for (var song = 0; song < lyric.length; song++) {
                    allSong += "<p>" + lyric[song].name + "</p>"
                }
                list_con.innerHTML = allSong;
                list_con.style.height = lyric.length * 30 + "px";
                for (var listIndex = 0; listIndex < list_item.length; listIndex++) {
                    list_item[listIndex].index = listIndex;
                    list_item[listIndex].onclick = function (ev) {
                        var ev = ev || window.event;
                        ev.stopPropagation();
                        songIndex = this.index;
                        change_music();
                    }
                }
                list_con.style.display = "none";
                list.onclick = function () {
                    if (list_con.style.display == "none") {
                        list_con.style.display = "block";
                    } else {
                        list_con.style.display = "none";
                    }
                }
                //下一首
                next_btn.onclick = function () {
                    songIndex++;
                    change_music();
                }
                prev_btn.onclick = function () {
                    songIndex--;
                    change_music();
                }

                function change_music() {
                    clearInterval(obj.timer);
                    if (songIndex >= lyric.length) {
                        songIndex = 0
                    } else if (songIndex < 0) {
                        songIndex = lyric.length
                    }
                    obj = new config();
                    iconinit();
                    audioInit();
                    playedTime();
                    lyric_ctrl();
                    updateLyrics();
                }

                //初始化总时长、音量等
                function audioInit() {
                    time.innerHTML = format(audio.duration);
                    audio.volume = 0.5;
                    play_btn.innerHTML = obj.play_btn;
                    vol_cube.style.left = audio.volume * vol_bar.offsetWidth + "px";
                    lyric_tit.innerText = lyric[songIndex].name;
                    photo_pic.style.background = "url(" + lyric[songIndex].img + ")";
                    audio.src = lyric[songIndex].audio_src;
                    progress_cube.style.left = 0;
                }

                audioInit();
                //播放时间
                audio.addEventListener("timeupdate", function () {
                    playedTime();
                })

                function playedTime() {
                    if (audio.currentTime == audio.duration) {
                        next_btn.onclick();
                        play_btn.onclick();
                    }
                    var n = audio.currentTime / audio.duration;
                    progress_cube.style.left = n * progress_bar.offsetWidth + "px";
                    initTime.innerHTML = format(audio.currentTime);
                    var id_num = parseInt(audio.currentTime);
                    var lyric_p = document.getElementsByTagName("p");
                    for (var i = 0; i < lyric_p.length; i++) {
                        lyric_p[i].index = i;
                    }
                    if (document.getElementById("lyric" + id_num)) {
                        var obj = document.getElementById("lyric" + id_num);
                        for (var i = 0; i < obj.index; i++) {
                            lyric_p[i].className = "played";
                        }
                        for (var j = obj.index; j < lyric_p.length; j++) {
                            lyric_p[j].className = "";
                        }
                        obj.className = "aquamarine active";
                        lyric_txt.style.top = lyric_con.offsetHeight / 2 - obj.offsetTop + "px";
                    }
                }

                function format(time) {
                    var time = parseInt(time);
                    var m = parseInt(time / 60);
                    var s = parseInt(time % 60);
                    m = zero(m);
                    s = zero(s);

                    function zero(num) {
                        if (num < 10) {
                            num = "0" + num;
                        }
                        return num;
                    }

                    return m + ":" + s;
                }
                //拖拽进度条
                progress_cube.onmousedown = function (ev) {
                    var ev = ev || window.event;
                    var initX = ev.clientX - this.offsetLeft;
                    this.onmousemove = function (ev) {
                        var ev = ev || window.event;
                        var x = ev.clientX - initX;
                        if (x < 0) {
                            x = 0
                        }
                        if (x > progress_bar.offsetWidth - 14) {
                            x = progress_bar.offsetWidth - 14
                        }
                        play_ctrl(x);
                    }
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        progress_cube.onmousemove = null;
                    }
                }
                function play_ctrl(x) {
                    var timego = x / progress_bar.offsetWidth * audio.duration;
                    progress_cube.style.left = x + "px";
                    audio.currentTime = timego;
                    playedTime();
                }

                //点击进度条位置
                progress_bar.onclick = function (ev) {
                    var ev = ev || window.event;
                    var dis = ev.clientX - (container.offsetLeft + progress_bar.offsetLeft) - 10;
                    progress_cube.style.left = dis + "px";
                    play_ctrl(dis);
                }/**/
                //拖动音量键
                vol_cube.onmousedown = function (ev) {
                    var ev = ev || window.event;
                    var initX = ev.clientX - vol_cube.offsetLeft;
                    this.onmousemove = function (ev) {
                        var ev = ev || window.event;
                        var x = ev.clientX - initX;
                        if (x < 0) {
                            x = 0
                        }
                        if (x > vol_bar.offsetWidth - 11) {
                            x = vol_bar.offsetWidth - 11
                        }
                        // cube_play(x)
                        var volresult = x / vol_bar.offsetWidth;
                        this.style.left = x + "px";
                        audio.volume = volresult;

                    }
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        vol_cube.onmousemove = null;
                    }
                }
                var audioCtx = null;
                var sourceNode = null;
                var analyser = null;

                play_btn.onclick = function () {
                    clearInterval(obj.timer);
                    if (obj.play_mark) {
                        this.innerHTML = obj.endplay_btn;
                        var canvas = document.getElementById("canvas");
                        var context = canvas.getContext("2d");

                        canvas.width = window.innerWidth;
                        canvas.height = window.innerHeight;
                        var WIDTH = canvas.width;
                        var HEIGHT = canvas.height;

                        if (!audioCtx) {
                            audioCtx = new AudioContext();
                            sourceNode = audioCtx.createMediaElementSource(audio);
                            analyser = audioCtx.createAnalyser();
                            sourceNode.connect(analyser);
                            analyser.connect(audioCtx.destination);
                            analyser.fftSize = 128;
                        }

                        var bufferLength = analyser.frequencyBinCount;
                        var barWidth = (WIDTH / bufferLength) - 1;
                        var barHeight;
                        var dataArray = new Uint8Array(bufferLength);

                        function renderFrame() {
                            requestAnimationFrame(renderFrame);
                            context.fillStyle = "#222425";
                            context.fillRect(0, 0, WIDTH, HEIGHT);
                            analyser.getByteFrequencyData(dataArray);

                            var x = 0;
                            for (var i = 0; i < bufferLength; i++) {
                                var data = dataArray[i];
                                var percentV = data / 255;
                                var percentH = i / bufferLength;
                                barHeight = HEIGHT * percentV;
                                var r = 255 * percentV;
                                var g = 255 * percentH;
                                var b = 50;
                                context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
                                context.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
                                x += barWidth + 1;
                            }
                        }

                        renderFrame();
                        audio.play();

                        obj.timer = setInterval(function () {
                            obj.rotateSum = obj.rotateSum + 1;
                            photo_pic.style.transform = "rotate(" + obj.rotateSum + "deg)";
                        }, 30)
                    } else {
                        this.innerHTML = obj.play_btn;
                        audio.pause();
                    }
                    obj.play_mark = !obj.play_mark;
                }
                // 歌词处理
                function lyric_ctrl() {
                    var lyricObj = lyric[songIndex].content;
                    var temp = lyricObj.split("[");
                    var html = "";
                    for (var i = 0; i < temp.length; i++) {
                        var arr = temp[i].split("]");
                        var text = (arr[1]);
                        var time = arr[0].split(",");
                        var temp2 = time[0].split(".");
                        var ms = temp2[1];//毫秒
                        var temp3 = temp2[0].split(":");
                        var s = temp3[1];//秒
                        var m = temp3[0];//分
                        var s_sum = parseInt(m * 60) + parseInt(s);
                        if (text) {
                            html += "<p id='lyric" + s_sum + "'>" + text + "</p>";
                        }

                    }
                    lyric_txt.innerHTML = html;
                }
                function updateLyrics() {
                    var lyricArray=lyric[songIndex].content;
                    var currentTime = audio.currentTime;
                    for (var i = 0; i < lyricArray.length; i++) {
                        if (currentTime >= lyricArray[i].time) {
                            // 找到当前应该显示的歌词
                            var currentLyric = document.getElementById("lyric" + lyricArray[i].time);
                            if (currentLyric) {
                                // 高亮当前歌词
                                currentLyric.style.color = "#fff";
                                // 滚动到可见区域
                                currentLyric.scrollIntoView({ behavior: 'smooth', block: 'center' });

                                // 取消上一个歌词的高亮
                                var prevLyricTime = i > 0 ? lyricArray[i - 1].time : 0;
                                var prevLyric = document.getElementById("lyric" + prevLyricTime);
                                if (prevLyric) {
                                    prevLyric.style.color = ""; // 恢复默认颜色
                                }
                            }
                        } else {
                            break;
                        }
                    }
                }
                // var lyricObj = lyric[songIndex].content;
                // var temp = lyricObj.split("[");
                // var lyricArray = [];
                //
                // for (var i = 0; i < temp.length; i++) {
                //     var arr = temp[i].split("]");
                //     var text = arr[1];
                //     var time = arr[0].split(",");
                //     var temp2 = time[0].split(".");
                //     var ms = parseInt(temp2[1]);
                //     var temp3 = temp2[0].split(":");
                //     var s = parseInt(temp3[1]);
                //     var m = parseInt(temp3[0]);
                //     var s_sum = m * 60 + s;
                //
                //     if (text) {
                //         lyricArray.push({
                //             time: s_sum,
                //             text: text
                //         });
                //     }
                // }
                //
                // function updateLyrics() {
                //     var currentTime = audio.currentTime;
                //     for (var i = 0; i < lyricArray.length; i++) {
                //         if (currentTime >= lyricArray[i].time) {
                //             var currentLyric = document.getElementById("lyric" + lyricArray[i].time);
                //             if (currentLyric) {
                //                 currentLyric.style.color = "#fff";  // 高亮当前歌词
                //                 currentLyric.scrollIntoView();  // 滚动到当前歌词位置
                //             }
                //         } else {
                //             break;
                //         }
                //     }
                // }
                //
                // audio.addEventListener("timeupdate", updateLyrics);

                // var lyricObj = lyric[songIndex].content;
                // var temp = lyricObj.split("[");
                // var lyricArray = [];
                //
                // for (var i = 0; i < temp.length; i++) {
                //     var arr = temp[i].split("]");
                //     var text = arr[1];
                //     var time = arr[0].split(",");
                //     var temp2 = time[0].split(".");
                //     var ms = parseInt(temp2[1]);
                //     var temp3 = temp2[0].split(":");
                //     var s = parseInt(temp3[1]);
                //     var m = parseInt(temp3[0]);
                //     var s_sum = m * 60 + s;
                //
                //     if (text) {
                //         lyricArray.push({
                //             time: s_sum,
                //             text: text
                //         });
                //     }
                // }
                //
                // function updateLyrics() {
                //     var currentTime = audio.currentTime;
                //     for (var i = 0; i < lyricArray.length; i++) {
                //         if (currentTime >= lyricArray[i].time) {
                //             var currentLyric = document.getElementById("lyric" + lyricArray[i].time);
                //             if (currentLyric) {
                //                 currentLyric.style.color = "#fff";  // 高亮当前歌词
                //                 currentLyric.scrollIntoView();  // 滚动到当前歌词位置
                //             }
                //         } else {
                //             break;
                //         }
                //     }
                // }
                //
                // audio.addEventListener("timeupdate", updateLyrics);

                // function lyric_ctrl() {
                //     var lyricObj = lyric[songIndex].content;
                //
                //     var html = "";
                //
                //
                //             html += "<p id='lyric' >" + lyricObj+ "</p>";
                //     lyric_txt.innerHTML = html;
                //     }


                lyric_ctrl();

                function iconinit() {
                    icon1.className = "icon";
                    icon1.innerHTML = obj.icon1;
                    icon1.style.color = "#fff";
                    icon2.className = "icon";
                    icon2.style.color = "#fff";
                }

                //喜欢 收藏
                icon2.onclick = function () {
                    if (this.innerHTML == obj.icon2) {
                        this.innerHTML = obj.endicon2;
                        this.style.color = "aquamarine";
                        this.className = "icon yellow";
                    } else {
                        this.innerHTML = obj.icon2;
                        this.style.color = "#fff";
                        this.className = "icon";
                    }
                }
                icon1.onclick = function () {
                    if (this.style.color == obj.icon1_co) {
                        this.innerHTML = obj.endicon1;
                        this.style.color = "#f7759f";
                        this.className = "icon pink";
                    } else {
                        this.innerHTML = obj.icon1;
                        this.style.color = obj.icon1_co;
                        this.className = "icon";
                    }
                }
            }
        })

    })
} else if (null != songListId1) {

    //data
    $(function () {

        $.get(`/dev/song/danbofang1/${songListId1}`, function (result) {
            lyric = result.data
            console.log(lyric)
            let str = `<audio id="audi" src="/dev/views/cxy/music/${lyric[0].songTitle}.mp3"></audio>`
            $(".ss").html(str)
            console.log(str)
            loadData(lyric)
        })

        function loadData(lyric) {
            window.onload = function () {
                var play_btn = document.getElementById("play_btn");
                var prev_btn = document.getElementById("prev_btn");
                var next_btn = document.getElementById("next_btn");
                var audio = document.getElementsByTagName("audio")[0];
                var initTime = document.getElementsByTagName("time")[0];
                var time = document.getElementsByTagName("time")[1];
                var progress_bar = document.getElementById("progress_bar");
                var progress_cube = document.getElementById("progress_cube");
                var vol_bar = document.getElementById("vol_bar");
                var vol_cube = document.getElementById("vol_cube");
                var lyric_con = document.getElementById("lyric_con");
                var lyric_txt = document.getElementById("lyric_txt");
                var photo_pic = document.getElementById("photo_pic");
                var icon1 = document.getElementById("icon1");
                var icon2 = document.getElementById("icon2");
                var lyric_tit = document.getElementById("lyric_tit");
                var list_con = document.getElementById("list_con");
                var list_item = list_con.getElementsByTagName("p");
                var songIndex = 0;
                var container = document.getElementById("container");
                var obj;
                console.log("====")
                function config() {
                    this.play_mark = true;
                    this.duration = audio.duration;
                    this.play_btn = "&#xe60e;";
                    this.vol = audio.volume;
                    this.timer = null;
                    this.rotateSum = 0;
                    this.icon1 = icon1.innerHTML;
                    this.icon2 = icon2.innerHTML;
                    this.icon1_co = icon1.style.color;
                    this.endplay_btn = "&#xe60c;";
                    this.endicon1 = icon1.innerHTML;
                    this.endicon2 = "&#xe674;";
                }


                console.log(lyric.length)
                obj = new config();
                //列表控制

                var allSong = "";
                console.log(lyric.length)
                for (var song = 0; song < lyric.length; song++) {
                    allSong += "<p>" + lyric[song].songTitle + "</p>"

                }
                console.log(allSong)
                list_con.innerHTML = allSong;
                list_con.style.height = lyric.length * 30 + "px";
                for (var listIndex = 0; listIndex < list_item.length; listIndex++) {
                    list_item[listIndex].index = listIndex;
                    list_item[listIndex].onclick = function (ev) {
                        var ev = ev || window.event;
                        ev.stopPropagation();
                        songIndex = this.index;
                        change_music();
                    }
                }
                list_con.style.display = "none";
                list.onclick = function () {
                    if (list_con.style.display == "none") {
                        list_con.style.display = "block";
                    } else {
                        list_con.style.display = "none";
                    }
                }
                //下一首
                next_btn.onclick = function () {
                    songIndex++;
                    change_music();
                }
                prev_btn.onclick = function () {
                    songIndex--;
                    change_music();
                }

                function change_music() {
                    clearInterval(obj.timer);
                    if (songIndex >= lyric.length) {
                        songIndex = 0
                    } else if (songIndex < 0) {
                        songIndex = lyric.length
                    }
                    obj = new config();
                    iconinit();
                    audioInit();
                    playedTime();
                    lyric_ctrl();
                }

                //初始化总时长、音量等
                function audioInit() {
                    time.innerHTML = format(audio.duration);
                    audio.volume = 0.5;
                    play_btn.innerHTML = obj.play_btn;
                    vol_cube.style.left = audio.volume * vol_bar.offsetWidth + "px";
                    lyric_tit.innerText = lyric[songIndex].songTitle;
                    photo_pic.style.background = "url(" + lyric[songIndex].imgg + ")";
                    audio.src = lyric[songIndex].audioSrc;
                    progress_cube.style.left = 0;
                }

                audioInit();
                //播放时间
                audio.addEventListener("timeupdate", function () {
                    playedTime();
                })

                function playedTime() {
                    if (audio.currentTime == audio.duration) {
                        next_btn.onclick();
                        play_btn.onclick();
                    }
                    var n = audio.currentTime / audio.duration;
                    progress_cube.style.left = n * progress_bar.offsetWidth + "px";
                    initTime.innerHTML = format(audio.currentTime);
                    var id_num = parseInt(audio.currentTime);
                    var lyric_p = document.getElementsByTagName("p");
                    for (var i = 0; i < lyric_p.length; i++) {
                        lyric_p[i].index = i;
                    }
                    if (document.getElementById("lyric" + id_num)) {
                        var obj = document.getElementById("lyric" + id_num);
                        for (var i = 0; i < obj.index; i++) {
                            lyric_p[i].className = "played";
                        }
                        for (var j = obj.index; j < lyric_p.length; j++) {
                            lyric_p[j].className = "";
                        }
                        obj.className = "aquamarine active";
                        lyric_txt.style.top = lyric_con.offsetHeight / 2 - obj.offsetTop + "px";
                    }
                }

                function format(time) {
                    var time = parseInt(time);
                    var m = parseInt(time / 60);
                    var s = parseInt(time % 60);
                    m = zero(m);
                    s = zero(s);

                    function zero(num) {
                        if (num < 10) {
                            num = "0" + num;
                        }
                        return num;
                    }

                    return m + ":" + s;
                }

                //拖拽进度条
                progress_cube.onmousedown = function (ev) {
                    var ev = ev || window.event;
                    var initX = ev.clientX - this.offsetLeft;
                    this.onmousemove = function (ev) {
                        var ev = ev || window.event;
                        var x = ev.clientX - initX;
                        if (x < 0) {
                            x = 0
                        }
                        if (x > progress_bar.offsetWidth - 14) {
                            x = progress_bar.offsetWidth - 14
                        }
                        play_ctrl(x);
                    }
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        progress_cube.onmousemove = null;
                    }
                }

                function play_ctrl(x) {
                    var timego = x / progress_bar.offsetWidth * audio.duration;
                    progress_cube.style.left = x + "px";
                    audio.currentTime = timego;
                    playedTime();
                }

                //点击进度条位置
                progress_bar.onclick = function (ev) {
                    var ev = ev || window.event;
                    var dis = ev.clientX - (container.offsetLeft + progress_bar.offsetLeft) - 7;
                    progress_cube.style.left = dis + "px";
                    play_ctrl(dis);
                }/**/
                //拖动音量键
                vol_cube.onmousedown = function (ev) {
                    var ev = ev || window.event;
                    var initX = ev.clientX - vol_cube.offsetLeft;
                    this.onmousemove = function (ev) {
                        var ev = ev || window.event;
                        var x = ev.clientX - initX;
                        if (x < 0) {
                            x = 0
                        }
                        if (x > vol_bar.offsetWidth - 11) {
                            x = vol_bar.offsetWidth - 11
                        }
                        var volresult = x / vol_bar.offsetWidth;
                        this.style.left = x + "px";
                        audio.volume = volresult;
                    }
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        vol_cube.onmousemove = null;
                    }
                }
                //点击播放
                play_btn.onclick = function () {
                    clearInterval(obj.timer);
                    if (obj.play_mark) {
                        this.innerHTML = obj.endplay_btn;
                        audio.play();
                        obj.timer = setInterval(function () {
                            obj.rotateSum = obj.rotateSum + 1;
                            photo_pic.style.transform = "rotate(" + obj.rotateSum + "deg)";
                        }, 30)
                    } else {
                        this.innerHTML = obj.play_btn;
                        audio.pause();
                    }
                    obj.play_mark = !obj.play_mark;
                }

                // 歌词处理
                function lyric_ctrl() {
                    var lyricObj = lyric[songIndex].content;
                    var temp = lyricObj.split("[");
                    var html = "";
                    for (var i = 0; i < temp.length; i++) {
                        var arr = temp[i].split("]");
                        var text = (arr[1]);
                        var time = arr[0].split(",");
                        var temp2 = time[0].split(".");
                        var ms = temp2[1];//毫秒
                        var temp3 = temp2[0].split(":");
                        var s = temp3[1];//秒
                        var m = temp3[0];//分
                        var s_sum = parseInt(m * 60) + parseInt(s);
                        if (text) {
                            html += "<p id='lyric" + s_sum + "'>" + text + "</p>";
                        }
                    }
                    lyric_txt.innerHTML = html;
                }

                // function lyric_ctrl() {
                //     var lyricObj = lyric[songIndex].content;
                //
                //     var html = "";
                //
                //
                //             html += "<p id='lyric' >" + lyricObj+ "</p>";
                //     lyric_txt.innerHTML = html;
                //     }


                lyric_ctrl();

                function iconinit() {
                    icon1.className = "icon";
                    icon1.innerHTML = obj.icon1;
                    icon1.style.color = "#fff";
                    icon2.className = "icon";
                    icon2.style.color = "#fff";
                }

                //喜欢 收藏
                icon2.onclick = function () {
                    if (this.innerHTML == obj.icon2) {
                        this.innerHTML = obj.endicon2;
                        this.style.color = "aquamarine";
                        this.className = "icon yellow";
                    } else {
                        this.innerHTML = obj.icon2;
                        this.style.color = "#fff";
                        this.className = "icon";
                    }
                }
                icon1.onclick = function () {
                    if (this.style.color == obj.icon1_co) {
                        this.innerHTML = obj.endicon1;
                        this.style.color = "#f7759f";
                        this.className = "icon pink";
                    } else {
                        this.innerHTML = obj.icon1;
                        this.style.color = obj.icon1_co;
                        this.className = "icon";
                    }
                }
            }
        }

    })
}
